<template>
  <view class="content">
    <div class="page">
      <div class="navbar navbar-large">
        <div class="navbar-bg"></div>
        <div class="navbar-inner">
          <div class="left">
            <a href="#" class="link back">
              <i class="icon f7-icons arrow-back">arrow_left</i>
            </a>
          </div>
          <div class="title">Search</div>

        </div>
      </div>
      <div class="page-content">
        <form class="searchbar searchbar-init searchbar-inline searchbar-search-page" data-search-container=".faq-list"
              data-search-in=".item-title">
          <div class="searchbar-inner">
            <div class="searchbar-input-wrap">
              <input type="search" placeholder="Search">
              <i class="searchbar-icon"></i>
              <span class="input-clear-button"></span>
            </div>
            <span class="searchbar-disable-button">Cancel</span>
          </div>
        </form>
        <div class="section-title">History</div>
        <div class="grid grid-cols-2 search-grid">
          <a href="#" class="link">
            <i class="icon f7-icons">search</i>
            US Elections
          </a>
          <a href="#" class="link">
            <i class="icon f7-icons">search</i>
            NBA Finals
          </a>
          <a href="#" class="link">
            <i class="icon f7-icons">search</i>
            Skin Routine
          </a>
          <a href="#" class="link">
            <i class="icon f7-icons">search</i>
            Vegan Meals
          </a>
          <a href="#" class="link">
            <i class="icon f7-icons">search</i>
            SpaceX Rocket
          </a>
          <a href="#" class="link">
            <i class="icon f7-icons">search</i>
            Summer Festival
          </a>
        </div>

        <div class="section-title">Categories</div>
        <swiper-container class="full-width categories-slider" slides-per-view="auto" space-between="10"
                          slides-offset-after="15" slides-offset-before="15" speed="400">
          <swiper-slide>
            <a href="#" data-href="/post-list/" class="link category-slide">Sports</a>
          </swiper-slide>
          <swiper-slide>
            <a href="#" data-href="/post-list/" class="link category-slide">Technology</a>
          </swiper-slide>
          <swiper-slide>
            <a href="#" data-href="/post-list/" class="link category-slide">Politics</a>
          </swiper-slide>
          <swiper-slide>
            <a href="#" data-href="/post-list/" class="link category-slide">Economics</a>
          </swiper-slide>
          <swiper-slide>
            <a href="#" data-href="/post-list/" class="link category-slide">Science</a>
          </swiper-slide>
          <swiper-slide>
            <a href="#" data-href="/post-list/" class="link category-slide">Fashion</a>
          </swiper-slide>
          <swiper-slide>
            <a href="#" data-href="/post-list/" class="link category-slide">Art</a>
          </swiper-slide>
          <swiper-slide>
            <a href="#" data-href="/post-list/" class="link category-slide">Music</a>
          </swiper-slide>
          <swiper-slide>
            <a href="#" data-href="/post-list/" class="link category-slide">Travel</a>
          </swiper-slide>
        </swiper-container>
        <div class="section-title">Suggested</div>
        <div class="post-list">
          <a href="/single/" class="link post-horizontal">
            <div class="infos">
              <div class="post-category">Science</div>
              <div class="post-title">Majestic King of the Savannah: The Untamed Beauty of Lions</div>
              <div class="post-date">30 minutes ago</div>
            </div>
            <div class="post-image"><img src="/static/img/post-list/2.jpg" alt=""></div>
          </a>
          <a href="/single/" class="link post-horizontal">
            <div class="infos">
              <div class="post-category">Fashion</div>
              <div class="post-title">Top Fashion Designers Unveil Innovative Collections for the Upcoming Season</div>
              <div class="post-date">3 hours ago</div>
            </div>
            <div class="post-image"><img src="/static/img/post-list/4.jpg" alt=""></div>
          </a>
          <a href="/single/" class="link post-horizontal">
            <div class="infos">
              <div class="post-category">Health</div>
              <div class="post-title">Cutting-Edge Medical Breakthrough Promises New Hope for Tropical Diseases Vaccines
              </div>
              <div class="post-date">2 days ago</div>
            </div>
            <div class="post-image"><img src="/static/img/post-list/6.jpg" alt=""></div>
          </a>
          <a href="/single/" class="link post-horizontal">
            <div class="infos">
              <div class="post-category">Business</div>
              <div class="post-title">From Companions to Protectors: Celebrating the Canine Species</div>
              <div class="post-date">5 days ago</div>
            </div>
            <div class="post-image"><img src="/static/img/post-list/7.jpg" alt=""></div>
          </a>
          <a href="/single/" class="link post-horizontal">
            <div class="infos">
              <div class="post-category">Environment</div>
              <div class="post-title">Renewable Energy Initiatives Pave the Way for a Sustainable Future</div>
              <div class="post-date">1 week ago</div>
            </div>
            <div class="post-image"><img src="/static/img/post-list/8.jpg" alt=""></div>
          </a>
        </div>
      </div>
    </div>

    <animationTabbar :active-index="1"></animationTabbar>
  </view>
</template>

<script setup lang="ts">
import animationTabbar from "@/uni_modules/animation-tabbar/components/animation-tabbar/animation-tabbar.vue";
</script>


<style scoped >
.content {
  height: 100vh;
}
</style>
